<!DOCTYPE HTML>
<html>
<body>
  <script>
    // forms: http://www.w3schools.com/tags/tag_form.asp
    // checkbox: http://stackoverflow.com/questions/4901410/correct-way-to-do-html5-checkbox
    // js actions: http://www.w3schools.com/js/default.asp
    // checkbox action: http://www.javascripter.net/faq/alert.htm#top
    // more checkbox action: http://stackoverflow.com/questions/4471401/getting-value-of-html-checkbox-from-onclick-onchange-events
    // global vars: http://snook.ca/archives/javascript/global_variable
    // dynamic hiding/showing of HTML content: http://support.microsoft.com/kb/199243
  </script>
  <form action="demo_form.asp" method="get" id="initialForm">
    <div>
      <p>Did you sell a house in 2010? <input type="checkbox" name="hasSoldHouse" onClick="window.hasSoldHouse = this.checked; updateDocument()"></p>
      <div style="visibility:hidden" id="if_hasSoldHouse">
        <p>Price the house was sold for: <input type="text" name="sellingPrice" onChange="window.sellingPrice = parseInt(this.value); updateDocument()" id="sellingPrice"></p>
        <p>Private debts for the sold house: <input type="text" name="privateDebt" onChange="window.privateDebt = parseInt(this.value); updateDocument()" id="privateDebt"></p>
        <div style="visibility:hidden" id="calculated_valueResidue">
          <p>Value residue: <span id="valueResidue_label"></span></p>
        </div>
      </div>
      <p>Did you buy a house in 2010? <input type="checkbox" name="hasBought'House"></p>
      <p>Did you enter a loan for maintenance/reconstruction? <input type="checkbox" name="hasMaintLoan"/></p>
    </div>
  </form>
  <script>
    function updateDocument() {
      document.getElementById("if_hasSoldHouse").style.visibility = window.hasSoldHouse ? "visible" : "hidden"
      document.getElementById("valueResidue_label").innerHTML = window.sellingPrice - window.privateDebt;
      document.getElementById("calculated_valueResidue").style.visibility = (!isNaN(window.sellingPrice) && !isNaN(window.privateDebt)) ? "visible" : "hidden";
    }
  </script>
</body>
</html>

